<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="page_nav">
                    <ul class="clearfix">
                        <li v-for="(item,index) in typeList" :key="index" :class="datatype == (index + 1)?'actives' : ''" @click="changeType(index+1)">{{item.txt}}</li>
                    </ul>
                </div>
                <div class="bid_item" v-show="!listIsZero" v-for="(item,index) in listData.data" :key="index">
                    <div class="bid-item__icon text-center">
                        <div class="bid-item__icon__avatar">
                            <router-link to="" class="displayB">
                                <img v-if="item.u_head_portrait" :src="item.u_head_portrait" class="head-img" />
                                <img v-else src="../../../assets/images/userPic.png" class="head-img" />
                            </router-link>
                        </div>
                        <el-rate v-model="item.start" class="bid-item__icon__star" disabled></el-rate>
                        <span>服务评价</span>
                    </div>
                    <div class="bid-item__person-info">
                        <p class="bid-item__person-info__name">{{(item.u_type == 1) ? item.u_nickname:item.u_enterprise_name}}</p>
                        <p class="bid-item__person-info__info">
                            <span>{{item.pName}} | {{item.cName}}</span>|
                            <span>{{item.utype == 1 ? '个人':'企业'}}</span>|
                            <span>{{item.u_phone}}</span>
                        </p>
                        <div class="bid-item__person-info__skill">
                            <span class="bid-item__person-info__skill__list__item item--active" v-for="(skill,num) in item.skill_arr" :key="num">{{skill}}</span>
                        </div>
                    </div>
                    <div class="bid-item__project-info text-right">
                        <p class="bid-item__project-info__bidtime">竞标于 {{item.pb_create_time}}</p>
                        <div class="bid-item__project-info__bidinfo">
                            <span class="bid-item__project-info__bidinfo__item">
                                <span class="bidinfo__item__num">
                                    <span class="unit" style="margin-right: 5px;">￥</span>
                                    {{item.pb_offer}}
                                </span><br/>
                                <span class="bidinfo__item__chineseunit">报价（元）</span>
                            </span>
                            <span class="bid-item__project-info__bidinfo__item">
                                <span class="bidinfo__item__num">{{item.pb_days}}</span><br/>
                                <span class="bidinfo__item__chineseunit">工期（天）</span>
                            </span>
                        </div>
                        <div class="bid-item__project-info__bidoperating">
                            <span @click="biddingcase(item.pb_id)">
                                <i><img src="../../../assets/images/fangan.png" width="22" /></i>竞标方案
                            </span>
                            <!-- 未注明倾向或者不合适状态 -->
                            <span @click="opeFun(2,item.pb_id)" v-show="item.pb_status == 1">
                                <i><img src="../../../assets/images/aixin.png" width="22" /></i>倾向
                            </span>
                            <span @click="opeFun(3,item.pb_id)" v-show="item.pb_status == 1">
                                <i><img src="../../../assets/images/ju.png" width="22" /></i>设为不合适
                            </span>
                            <!-- 倾向 -->
                            <span v-show="item.pb_status == 2">
                                <i><img src="../../../assets/images/aixin_a.png" width="22" /></i>倾向
                            </span>
                            <!-- 不合适 -->
                            <span v-show="item.pb_status == 3">
                                <i><img src="../../../assets/images/ju_a.png" width="22" /></i>设为不合适
                            </span>
                        </div>
                    </div>
                </div>
                <div class="pagination text-right" v-show="!listIsZero">
                    <el-pagination layout="prev, pager, next" :total="listData.total" @current-change="listPage"></el-pagination>
                </div>

                <!-- 暂无数据 -->
                <div class="mt-large text-center" v-show="listIsZero" style="margin: 100px 0px 110px;">
                    <img src="../../../assets/images/empty.jpg" height="200" alt="">
                    <p class="tip-small">暂无数据</p>
                </div>

            </el-col>
        </el-row>

        <!-- 竞标方案 -->
        <el-dialog :visible.sync="dialogVisible" width="900px" v-if="dialogVisible">
            <div class="dialog-content">
                <div class="dialog__left">
                    <div class="dialog__left__header clearfix">
                        <p class="header__title">竞标方案详情</p>
                        <p class="header__time">竞标时间： {{biddingData.pb_create_time}}</p>
                    </div>
                    <div class="dialog__left__main">
                        <p class="left__main__project_info">
                            <span>工期及报价 ( 预估 )： <span class="bolds">{{biddingData.pb_days}}</span> 天 | ￥<span class="bolds">{{biddingData.pb_offer}}</span> 元</span>
                            <span style="margin-left: 5px;">竞标附件：<span class="bolds">{{biddingData.pb_enclosure_name ? biddingData.pb_enclosure_name.length: ''}}</span></span>
                        </p>
                        <div class="left__main__advantage" style="margin-top: 10px;">
                            <span class="left__main__advantage__title">竞标优势</span>
                            <p class="left__main__advantage__text">{{biddingData.pb_content}}</p>
                        </div>
                        <div class="left__main__advantage" style="margin-top: 25px;">
                            <span class="left__main__advantage__title">竞标案例</span>
                            <p class="left__main__advantage__text" v-for="(item,index) in biddingData.case" :key="index">
                                <span><i style="font-style: normal;color: #2093ff;">项目名称：</i>{{item.cp_name}}</span>
                                <span style="margin-left: 40px;">项目周期：{{item.cp_cycle}}</span><br/>
                                <span>项目简介：<i v-html="item.cp_content" style="display: inline-block;font-style: normal;"></i></span><br/>
                                <span>担任角色：{{item.role_name}}</span><br/>
                                <span>应用技术：{{item.technology_name}}</span>
                            </p>
                        </div>
                        <div class="left__main__advantage" style="margin: 25px 0 60px;">
                            <span class="left__main__advantage__title">竞标附件（{{biddingData.pb_enclosure_name ? biddingData.pb_enclosure_name.length: '0'}}）</span>
                            <div class="left__main__advantage__text">
                                <div v-for="(item,index) in biddingData.pb_enclosure_name" :key="index" style="display: inline-block;width: 50%;">
                                    <span style="display: inline-block;line-height: 30px;color: #2093ff;cursor: pointer;" @click="downloadFile(item.f_id,item.f_old_name,item.f_file_type)">{{item.f_old_name}}.{{item.f_file_type}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <el-button type="primary" @click="opeFun(2,pbid)">设为倾向</el-button>
                        <el-button type="defalut" @click="opeFun(3,pbid)">设为拒绝</el-button>
                        <el-button type="defalut" @click="dialogVisible = false">关 闭</el-button>
                    </div>
                </div>
                <div class="dialog__right">
                    <div class="dialog__right__scroll">
                        <div class="dialog__right__avatar">
                            <router-link :to="{path: '/homepage',query:{'id': biddingData.user.u_id}}" class="displayB">
                                <img v-if="biddingData.user.u_head_portrait" :src="biddingData.user.u_head_portrait" />
                                <img v-else src="../../../assets/images/userPic.png" />
                            </router-link>
                        </div>
                        <p class="dialog__right__name text-center">{{(biddingData.user.u_type == 1)?biddingData.user.u_nickname:biddingData.user.u_enterprise_name}}</p>
                        <p class="dialog__right__address text-center">{{biddingData.user.pName}}-{{biddingData.user.cName}}</p>
                        <p class="dialog__right__phone text-center">{{biddingData.user.u_phone}}</p>
                        <div class="dialog__right__skill">
                            <p class="dialog__right__skill__title">擅长应用与项目：</p>
                            <p class="dialog__right__skill__title">{{biddingData.user.si_application_type}}</p>
                        </div>
                        <div class="dialog__right__skill">
                            <p class="dialog__right__skill__title">擅长开发技能：</p>
                            <p class="dialog__right__skill__title">{{biddingData.user.si_deve_skill}}</p>
                        </div>
                        <router-link :to="{path: '/homepage',query:{'id': biddingData.user.u_id}}" class="displayB dialog__right__btn text-center">
                            <el-button round>访问个人首页</el-button>
                        </router-link>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>

    import axios from 'axios';
    export default {
        data(){
            return{
                value1: 4,
                dialogVisible: false,
                datatype: 1,  //1为全部   2为倾向   3为拒绝
                listIsZero: true,
                typeList: [
                    {'type': 1,'txt': '全部'},
                    {'type': 2,'txt': '倾向的'},
                    {'type': 3,'txt': '已拒绝的'},
                ],
                listData: {},
                utype: 0,  //账号身份
                page: 1,
                biddingData: {},
                pbid: '',  //竞标id
            }
        },
        filters: {
            
        },
        methods: {
            init(){
                var _this = this;

                this.$httpGet('/api/index/Workbench/biddingList',{'p_id': this.$route.query.pid,'pb_status': this.datatype,'p_uid': window.localStorage.uid,'page': this.page}).then(response => {

                    if(response.code == 200){

                        _this.listIsZero = false;
                        _this.listData = response.msg;

                        for(var i=0;i<response.msg.data.length;i++){
                            
                            if(response.msg.data[i].p_skills_name){
                                _this.listData.data[i].skill_arr = response.msg.data[i].p_skills_name.split(',');
                            }else{
                                _this.listData.data[i].skill_arr = [];
                            }
                            
                        }
                        
                    }else if(response.code == 301){  //暂无数据
                        _this.listIsZero = true;
                        _this.listData = [];
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //切换type
            changeType(ind){
                this.datatype = ind;
                this.init();
            },
            //切换页码
            listPage(page){
                this.page = page;
                this.list();
            },
            //倾向  、拒绝
            opeFun(type,pbid){
                var _this = this;
                this.$httpGet('/api/index/Workbench/updateBiddingStatus',{
                    'pb_status': type,
                    'pb_id': pbid,  //竞标id
                }).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        _this.init();
                        _this.dialogVisible = false;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //竞标方案
            biddingcase(pbid){
                var _this = this;
                
                _this.pbid = pbid;
                this.$httpGet('/api/index/Workbench/caseList',{'pb_id': pbid}).then(response => {

                    if(response.code == 200){

                        _this.biddingData = response.msg;
                        if(response.msg.case){
                            for(var i=0;i<response.msg.case.length;i++){
                                _this.biddingData.case[i].cp_content = _this.escapeStringHTML(response.msg.case[i].cp_content);
                            }
                        }else{
                            _this.biddingData.case = [];
                        }

                        if(response.msg.p_enclosure_name){
                            _this.biddingData.p_enclosure_name = response.msg.p_enclosure_name;
                        }else{
                            _this.biddingData.p_enclosure_name = [];
                        }
                        
                        _this.dialogVisible = true;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //下载附件
            downloadFile(fid,f_old_name,f_file_type){
                var _this = this;

                axios({
                    method: 'get',
                    url: '/api/index/Project/download',
                    params: {
                        'f_id': fid,
                    },
                    responseType: 'arraybuffer',

                })
                .then(function (response) {

                    _this.download(response.data,f_old_name,f_file_type);

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            // 下载文件
            download (data,f_old_name,f_file_type) {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', f_old_name +'.'+f_file_type);

                document.body.appendChild(link);
                link.click();
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.utype = window.localStorage.utype;
            this.init();
        },
    }
</script>